<template>
  <div class="ceshi p-20" style="padding-top:70px ">
    <div>
      <div class="text-bold">远程mock测试</div>
      <div>{{mockInfo}}</div>
    </div>
    <div class="m-t-20">
      <div class="text-bold">width: clamp(100px,50%,200px);</div>
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>
    <div v-for="() in 100">123</div>
    <div class="hand m-b-10" @click="toggleFullscreen">局部区域全屏按钮</div>
    <div id="log"  style="width: 100px;height: 100px;background: red">box</div>
    <div class="text-bold" style="position: absolute;right: 0;bottom: 0">
        小叶拖拽效果
        <div style="background: #efc69e;width: 140px;height: 140px;border-radius: 10px">
        </div>
    </div>
    <drag/>
  </div>

</template>

<script>
import screenfull from "screenfull";
import axios from "axios";
import drag from "./components/drag.vue"
export default {
  name: "ceshi",
  components:{
    drag
  },
  data(){
    return{
      mockInfo:"",
    }
  },
  created() {
    // mock数据
    const baseUrl = 'https://www.fastmock.site/mock/004f172468c5e977154dc596b4d66bc0/api'
    axios.get(`${baseUrl}/test`).then(res=>{
      this.mockInfo = res.data.data
      console.log(res)
    })
  },
  methods:{
    toggleFullscreen() {
      const ele = document.getElementById('log');//指定全屏区域元素
      if (screenfull.isEnabled) {
        screenfull.request(ele);
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.ceshi{
  //clamp
  .parent {
    width: 300px;
    height: 80px;
    padding:12px;
    overflow: auto;
    // 调整元素大小
    resize: horizontal;
    background: #9f86db;
    border-radius: 8px;
    .child{
      border-radius: 4px;
      height: 100%;
      background: #e6a6ed;
      width: clamp(100px,50%,200px);
    }
  }
}
</style>
